<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .slide-fade-enter-active {
            transition: all .3s ease;/*规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）*/
        }
        .slide-fade-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.1, 0.2, 1.0);/*速度曲线在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。*/
        }
        .slide-fade-enter, .slide-fade-leave-to{
            transform: translateX(10px);/*沿x轴移动*/
            opacity: 0;/*透明度*/
        }
        /*规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。*/
        /*ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。*/
        /*ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。*/
        /*ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。*/
        /*ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。*/
        /*cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。*/
        /*入场动画*/
        /*　　　　<name>-enter      　　　　入场前*/
        /*　　　　<name>-enter-active　　  入场持续的过程*/
        /*　　　　<name>-enter-to　　　　入场后*/
        /*　　出场动画*/
        /*　　　　<name>-leave　　　　　　出场前*/
        /*　　　　<name>-leave-active　　　出场持续的过程*/
        /*　　　　<name>-leave-to　　　　  出场后*/
    </style>
</head>
<body>
<div id="example-1">
    <button @click="show = !show">
        Toggle render
    </button>
    <transition name="slide-fade">
        <p v-if="show">hello</p>
    </transition>
    <!--transition 的class属性=  name+-enter-active-->
</div>
</body>
<script>
    new Vue({
        el: '#example-1',
        data: {
            show: true
        }
    })
</script>
</html>